<template>
  <div>
    <div style="margin: 10px 0">
      <el-carousel height="450px" :interval="10000">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" style="width: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin: 10px 0">
      <el-row :gutter="10">
        <!--        <el-col :span="6" v-for="item in files" :key="item.id" style="margin-bottom: 10px">-->

        <!--          <div style="border: 1px solid #ccc; padding-bottom: 10px">-->
        <!--            <img :src="item.url" alt="" style="width: 100%">-->
        <!--            <div style="color: #666; padding: 10px">{{ item.name }}</div>-->
        <!--            <div style="padding: 10px"><el-button type="primary">购买</el-button></div>-->
        <!--          </div>-->
        <!--        </el-col>-->
        <div class="w lb-qs" id="louti3">
          <!-- 类别标题 -->
          <div class="qs-t">
            <i class="lt iconfont tit-ico3">&#xe615;<i></i></i>
            <div class="l t-title">演唱会</div>
          </div>
          <!-- 演出区域-->
          <div class="qs-c">
            <!-- 演出详情区 单个项目-->
            <div class="qs-cc" v-for="item in ticketTable" @click="$router.push('/front/ticketDetail?id=' + item.id)">
              <span class="haibao">
                <a>
                  <img class="haibao" :src="item.coverImg" alt="项目海报" /></a><!-- 项目海报 -->
                <ul class="haibao-xx">
                  <li class="cc-changguan"> <!-- 项目场馆 -->
                    <i class="lt iconfont i-ico mar5">&#xe613;</i>
                    [{{ item.address }}]{{ item.venuenName }}
                  </li>
                  <li class="cc-time"> <!-- 项目时间 -->
                    <i class="lt iconfont i-ico mar5">&#xe612;</i>
                    {{ item.dateTime }}
                  </li>
                </ul>
              </span><!-- 项目海报 -->
              <a class="cc-title slh qs-cc-haibao" target="_blank">{{ item.name }}</a>
              <!-- 项目标题 -->
              <!-- 演出价格 城市 -->
              <div>
                <span class="pic-fh">￥</span>
                <span class="cc-price">{{ item.price }}</span><span class="cor7">&nbsp;起</span>
                <span class="fot15 cc-city">[{{ item.address }}]</span>
              </div>
            </div>
          </div>
          <!-- 类别标题 -->
          <div class="qs-t">
            <i class="lt iconfont tit-ico3" style="color: #EEC400">&#xe615;<i></i></i>
            <div class="l t-title">推荐</div>
          </div>
          <!-- 演出区域-->
          <div class="qs-c">
            <!-- 演出详情区 单个项目-->
            <div class="qs-cc" v-for="item in ticketTable2" @click="$router.push('/front/ticketDetail?id=' + item.id)">
              <span class="haibao">
                <a>
                  <img class="haibao" :src="item.coverImg" alt="项目海报" /></a><!-- 项目海报 -->
                <ul class="haibao-xx">
                  <li class="cc-changguan"> <!-- 项目场馆 -->
                    <i class="lt iconfont i-ico mar5">&#xe613;</i>
                    [{{ item.address }}]{{ item.venueName }}
                  </li>
                  <li class="cc-time"> <!-- 项目时间 -->
                    <i class="lt iconfont i-ico mar5">&#xe612;</i>
                    {{ item.dateTime }}
                  </li>
                </ul>
              </span><!-- 项目海报 -->
              <a class="cc-title slh qs-cc-haibao" target="_blank">{{ item.name }}</a>
              <!-- 项目标题 -->
              <!-- 演出价格 城市 -->
              <div>
                <span class="pic-fh">￥</span>
                <span class="cc-price">{{ item.price }}</span><span class="cor7">&nbsp;起</span>
                <span class="fot15 cc-city">[{{ item.address }}]</span>
              </div>
            </div>
          </div>
          <div class="w yanchu-ph radius"> <!-- 排行 -->
            <div class="ph-o ph-by radius">
              <div class="by-top"></div>
              <ul>
                <!-- 排行标题 -->
                <li>近期推荐</li>
                <li v-for="(item, index) in ticketTable">
                  <span class="l by by-mc">{{ index + 1 }}</span>
                  <a @click="$router.push('/front/ticketDetail?id=' + item.id)" class="l cc-title  by-title"
                    target="_blank">{{ item.name }}</a>
                  <span class="r">
                    <span v-if="item.concertTotal > 0" style="font-size: 14px;color:#ff6600">出售中</span>
                    <span v-else class="cc-price cor7" style="font-size: 14px;">补票中</span></span>
                </li>
              </ul>
            </div>
            <div class="ph-o ph-yr radius">
              <div class="by-top"></div>
              <div class="rmyr">热门艺人</div>
              <ul class="yr yr-on">
                <!-- <li class="rmyr">热门艺人</li> -->
                <li class="yr-tx cc-name">
                  <a href="https://baike.baidu.com/item/张杰/256?fr=ge_ala" target="_blank">
                    <img class="tx-tx" src="../../static/images/20200102115136445.jpg" alt="艺人头像">
                  </a>
                </li>
                <li class="yr-tx cc-name">
                  <a href="https://baike.baidu.com/item/林俊杰/131821?fromModule=lemma_search-box" target="_blank">
                    <img class="tx-tx" src="../../static/images/20200102141334861.jpg" alt="艺人头像">
                  </a>
                </li>
                <li class="yr-tx cc-name">
                  <a href="https://baike.baidu.com/item/陈奕迅/128029?fromModule=lemma_search-box" target="_blank">
                    <img class="tx-tx" src="../../static/images/20200102150235598.jpg" alt="艺人头像">
                  </a>
                </li>
                <li class="yr-tx cc-name">
                  <a href="https://baike.baidu.com/item/周杰伦/129156?fromModule=lemma_search-box" target="_blank">
                    <img class="tx-tx" src="../../static/images/20200102151031931.jpg" alt="艺人头像">
                  </a>
                </li>
                <li class="yr-tx cc-name">
                  <a href="https://baike.baidu.com/item/刘德华/114923" target="_blank">
                    <img class="tx-tx" src="../../static/images/20200102151123121.jpg" alt="艺人头像">
                  </a>
                </li>
                <li class="yr-tx cc-name">
                  <a href="https://baike.baidu.com/item/李荣浩/3976957?fromModule=lemma_search-box" target="_blank">
                    <img class="tx-tx" src="../../static/images/20200102152117578.jpg" alt="艺人头像">
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      imgs: [
        'https://img0.tking.cn/mtl/default/img/dWhxjEpJXh_.jpg',
        'https://img0.tking.cn/mtl/default/img/rTEatA4SFp_.png',
        'https://img0.tking.cn/mtl/default/img/r84mPC32SF_.jpg',
        'https://img0.tking.cn/mtl/default/img/PTaJBfEXXb_.jpg',
      ],
      files: [],
      ticketTable: [],
      ticketTable2: [],
      pageNum1: 1,
      pageNum2: 2,
      pageSize: 4,
      total: 0,
      level: "",
      coverImg: ""
    }
  },
  created() {
    // this.request.get("/echarts/file/front/all").then(res => {
    //   console.log(res.data)
    //   this.files = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
    // })
    this.load();
  },
  methods: {
    load() {
      this.request.get("/concert/front/findConcertWithTicket", {
        params: {
          pageNum: this.pageNum1,
          pageSize: this.pageSize,
          level: this.level,
        }
      }).then(res => {
        this.ticketTable = res.data.dataList
        console.log(this.ticketTable)

      })
      this.request.get("/concert/front/findConcertWithTicket", {
        params: {
          pageNum: this.pageNum2,
          pageSize: this.pageSize,
          level: this.level,
        }
      }).then(res => {
        this.ticketTable2 = res.data.dataList
      })
    },
  }
}
</script>
<style src="../../static/css/common2.css" scoped></style>
<style src="../../static/css/index.css" scoped></style>
<style></style>
